<!--
 * @Author: hfWang
 * @Date: 2022-09-14 20:49:50
 * @LastEditTime: 2022-10-19 20:11:55
 * @Description: file content
 * @FilePath: \blog\docs\.vitepress\theme\MyComps\MyFeature.vue
-->
<script setup lang="ts">
const props = defineProps<{
	title: string;
	details?: string;
	icon?: string;
	url?: string;
	_blank?: boolean;
}>();
const jumpToTargetUrl = () => {
	if (!props.url) return;
	const type = props._blank ? "_blank" : "_self";
	let url = props.url;
	if (!props._blank) {
		url = location.origin +  url;
	}
	let a = document.createElement("a") as HTMLAnchorElement | null;
	a!.setAttribute("href", url);
	a!.setAttribute("target", type);
	a!.click();
	setTimeout(() => {
		a = null;
	}, 300);
};
</script>

<script lang="ts">
export default {
	name: "MyFeature",
};
</script>

<template>
	<article class="VPFeature" @click="jumpToTargetUrl">
		<div v-if="props.icon" class="icon">{{ props.icon }}</div>
		<h2 class="title">{{ props.title }}</h2>
		<p v-if="props.details" class="details">{{ props.details }}</p>
	</article>
</template>

<style scoped>
.VPFeature {
	border: 1px solid var(--vp-c-bg-soft);
	border-radius: 12px;
	padding: 24px;
	height: 100%;
	background-color: var(--vp-c-bg-soft);
	cursor: pointer;
}

.VPFeature:hover {
	transform: scale(1.01);
	background-image: linear-gradient(to right, var(--vp-c-bg-soft), var(--vp-c-bg-alt));
}

.icon {
	display: flex;
	justify-content: center;
	align-items: center;
	margin-bottom: 20px;
	border-radius: 6px;
	background-color: var(--vp-c-gray-light-4);
	width: 48px;
	height: 48px;
	font-size: 24px;
}

.dark .icon {
	background-color: var(--vp-c-bg-mute);
}

.title {
	line-height: 24px;
	font-size: 20px;
	font-weight: 600;
	color: transparent;
	-webkit-background-clip: text;
	background-image: linear-gradient(to right, var(--vp-c-brand-light), var(--vp-c-brand-lighter));
}

.details {
	padding-top: 8px;
	line-height: 24px;
	font-size: 14px;
	font-weight: 500;
	color: var(--vp-c-text-2);
}

h2 {
	margin: 0;
}
</style>
